$(function() {
	layui.use('table', function() {
		//获得模块对象
		var table = layui.table;
		var form = layui.form;
		var $ = layui.jquery;
		var layer = layui.layer;
		
		// -----------------------------------
		// 数据表格渲染
		var userTable = table.render({
			id : 'userTb',
			elem : '#test',
			url : 'users',
			method : 'get',
			where : {} // 你额外要携带数据，以键值对的方式存入
			,
			toolbar : '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
			,
			defaultToolbar : [ 'filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title : '提示',
				layEvent : 'LAYTABLE_TIPS',
				icon : 'layui-icon-tips'
			} ],
			cellMinWidth : 80 // 全局定义所有常规单元格的最小宽度（默认：60）
			,
			cols : [ [ {
				title:'序号',
				type : 'numbers'
			} // 序号
			, {
				type : 'checkbox'
			} // 复选框
			, {
				field : 'userId',
				title : '用户ID',
				hide:true
			},{
				field : 'userName',
				title : '用户名',
				//hide:true
			},{
				field : 'gender',
				title : '性别',
				templet: function(d){
					if (d.gender=="M") {
						return '男';
					} else {
						return '女';
					}
			      }
			},{
				fixed : 'right',
				align : 'center',
				title : '是否可用',
				width : 100,
				templet : '#checkboxTpl',
				unresize : true
			},
			] ],
			page : true // 开启分页
			,
			limit : 10 // 每页显示的条数
			,
			limits : [ 5, 10, 20, 50, 100 ] // 每页条数的选择项
			,
			loading : true // 是否显示加载条(切换分页的时候显示）
			,
			even : false
		// 隔行变色
		});
		//头部工具栏事件
		table.on('toolbar(test)', function(obj) {
			
			var checkStatus = table.checkStatus(obj.config.id);
			
			switch (obj.event) {
			//分配角色
			case 'updateUserModal':
				var data = checkStatus.data;
				if(data.length < 1 ){
				layer.msg("请选择你要分配角色的数据");
				}else if(data.length > 1){
					layer.msg("一次只能修改一条数据");
				}else{
					intUpdateUserModal(checkStatus.data[0]);
				}
				break;
				
				
			//分配权限
			case 'updateUserModal':
				var data = checkStatus.data;
				if(data.length < 1 ){
				layer.msg("请选择你要分配权限的数据");
				}else if(data.length > 1){
					layer.msg("一次只能修改一条数据");
				}else{
					intUpdateUserModal(checkStatus.data[0]);
				}
				break;

			// 自定义头工具栏右侧图标 - 提示
			case 'LAYTABLE_TIPS':
				layer.alert('这是工具栏右侧自定义的一个图标按钮');
				break;
			}
			;
		});
		
		 //自定义验证规则
		
		/*  form.verify({
			userName: [
			      /^[\S]{2,12}$/
			      ,'用户名至少要2个字符，不能超过12个字符'
			    ]
		    ,pass: [
		      /^[\S]{6,12}$/
		      ,'密码必须6到12位，且不能出现空格'
		    ],userPhone: [
		    	/^1[3456789]\d{9}$/
		    	,'请输入正确的手机号'
			    ],"userEmail": [
			    	/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
				      ,'邮箱格式不正确，正确格式为：xxx@xx.com'
				    ],createDate: [
				    	/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
					      ,'日期格式不正确，正确格式为：xxxx-xx-xx'
					    ]
		    
		  });*/
		 
		//头部搜素表单提交
		  form.on('submit(userQueryBtn)', function(data){
			  console.log(data);
			   console.log(data.elem);//被执行事件的元素DOM对象，一般为button对象
			  console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
			 console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
		
			  var data = data.field;
			  userTable.reload({
				  where : {
					  "userName" : data.userName,
					  "gender" : data.gender,
					  "phone" : data.phone,
					  "useable" : data.useable
				  },
				  page : {
					  curr : 1
				  }
			  });
			// 阻止表单跳转。如果需要表单跳转，去掉这段即可。
			  return false;
		  });
		  
		
		// 初始化修改模态框
		var intUpdateUserModal = function(data){
			//console.log(data);
			layer.open({
				  type: 1,
				  skin: 'layui-layer-rim', //加上边框
				  area: ['450px', '600px'], //宽高
				  content: $("#editForm"),
				  resize : false, //是否允许拉伸
				  end : function() { // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
						// 清空表单
						$("#editUserForm")[0].reset();
					}
				});
			
			
			//给修改表单赋值
			//alert(data.userId)
			form.val('editUserForm', {
				"userId" : data.userId,
				 "userName" : data.userName,
					"password" : data.password,
					"phone" : data.phone,
					"gender" : data.gender,
					"userPic" : data.userPic,
					"useable" : data.useable
			});
			
		}
		// 关闭模态框
		$(".modalClose").click(function() {
			// 关闭页面上所有类型的所有弹框
			layer.closeAll();
		});
		
		//重置
		$("#reset").click(function(){
			userTable.reload({
				where: {
					 "userName" : null,
					  "gender" : null,
					  "phone" : null,
					  "useable" : null
				} //设定异步数据接口的额外参数，任意设
				,page: {
					curr: 1 //重新从第 1 页开始
				}
			});
				 
		})
		
	});
	
})

